<template>
  <div class="card-list">
    <div
      class="card"
      v-for="item in cardList"
      :key="item.title"
      :style="{ background: `linear-gradient(to right, ${item.gradient[0]}, ${item.gradient[1]})` }"
    >
      <div class="card-title">{{ item.title }}</div>
      <div class="card-description">{{ item.description }}</div>
      <button class="card-btn" :style="{ backgroundColor: item.btnColor }">GO ></button>
      <img class="card-img" src="../../../assets/image/phone.png" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
const cardList = [
  {
    title: '天天抽大奖',
    description: '免费领回家',
    btnColor: '#ffad2e',
    gradient: ['#fffbdf', '#fff0a8']
  },
  {
    title: '"租"力防疫',
    description: '宅家不无聊',
    btnColor: '#fb4a29',
    gradient: ['#fffcfd', '#ffe0e0']
  },
  {
    title: '走路赚租币',
    description: '宅家不无聊',
    btnColor: '#00d5a8',
    gradient: ['#e6fafe', '#d9fdf4']
  }
]
</script>

<style lang="less" scoped>
.card-list {
  margin-top: -40px;
  white-space: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }

  .card {
    width: 130px;
    height: 65px;
    padding: 10px;
    display: inline-block;
    border-radius: 10px;
    margin-left: 10px;
    background: linear-gradient(to right, #fffbdf, #fff0a8);
    position: relative;

    .card-title {
      font-weight: 700;
    }
    .card-description {
      font-size: 12px;
      color: #c5c0b1;
      margin: 5px 0;
    }
    .card-btn {
      height: 20px;
      line-height: 20px;
      color: #fff;
      border: none;
      border-radius: 15px;
      background-color: #ffad2e;
      margin-top: 3px;
    }

    .card-img {
      width: 35px;
      position: absolute;
      bottom: 5px;
      right: 20px;
    }
  }
}
</style>
